<template>
  <div class="container">
    <a-row :gutter="24">
      <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        相关文档：
        <a href="https://www.antdv.com/components/icon-cn" target="_blank">Ant Design Vue icon</a>;
        更多icon可到<a href="https://xicons.org/#/" target="_blank">xicons</a>下载;
      </a-col>
    </a-row>

    <a-divider orientation="left">icon</a-divider>

    <a-row :gutter="24">
      <a-space>
        <adv-icon-picker ref="iconSelectRef" v-model="iconName"></adv-icon-picker>
        <my404 />
        <GithubOutlined />
      </a-space>
    </a-row>

    <div class="code">npm install --save @ant-design/icons-vue</div>
  </div>
</template>

<script lang="ts" setup name="DemoIcon">
import AdvIconPicker from "@/components/AdvIconPicker/index.vue";
import { ref } from "vue";

const iconName = ref();
</script>
<style lang="less" scoped>
.code {
  background: #f5f5f5;
  margin: 16px 0;
  padding: 12px 20px;
  overflow: auto;
}
</style>
